import React,{useState} from 'react';
import { Button, Space, Table, Tag,Select,Modal,Popconfirm  } from 'antd';
import { async_del } from '../../store/crilsSlice';
import {useSelector,useDispatch} from "react-redux"
import dayjs from 'dayjs';
import Myfrom from './myfrom';
const Shoplist = (props) =>{
  let obj=useSelector(state=>state.todos)
  let dispatch=useDispatch()
  console.log(obj);
  let [current,setcurrent]=useState(1)
  let [pageSize,setpageSize]=useState(3)
  let [total,settotal]=useState(obj.shoplist.length)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  let [titles,settitles]=useState('添加')
  let [itemObj,setItem]=useState({})
  const columns = [
  {
    title: '优惠卷名称',
    dataIndex: 'title',
  
  },
  {
    title: '优惠卷面值',
    dataIndex: 'mian',

  },
  {
    title: '优惠卷最低消费',
    dataIndex: 'min',

  },
  {
    title: '优惠卷有效期限',
    dataIndex: 'day',

  },
    {
    title: '排序',
    dataIndex: 'sort',

  },
      {
    title: '状态',
    dataIndex: 'state',
    render:(state)=>{
      return <Tag color={state?"blue":"red"}>{state?"开启":'关闭'}</Tag>
    }

  },
     {
    title: '创建时间',
    dataIndex: 'time',
    render:(time)=>{
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
    }

  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
       <Button onClick={()=>{
        props.history.push('/admin/typelist')
       }}>发布</Button>
           <Select
defaultValue="操作"
      style={{ width: 120 }}
      onChange={(value)=>{
        if(value=='编辑'){
          showModal()
          settitles('编辑')
          setItem(record)
        }else if(value=='删除'){
          alert('确认删除吗')
            dispatch(async_del(record.id))
        }
      }}
      options={[
        { value: '编辑', label: '编辑' },
        { value: '删除', label: '删除' },

      ]}
    />

      </Space>
    ),
  },
];
  return <div>
     <Button type="primary" onClick={()=>{
      showModal()
settitles('添加')
setItem({})
     }}>
 添加
      </Button>
      <Modal
        title={titles}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
<Myfrom titles={titles} itemObj={itemObj}  onCancel={handleCancel} key={new Date().getTime()}></Myfrom>
      </Modal>
    <Table columns={columns} dataSource={obj.shoplist} rowKey={'id'}
    pagination={{
      current,
      pageSize,
      total,
      showQuickJumper:true,
      showSizeChanger:true,
      onChange(page,pageSize){
        setcurrent(page)
        setpageSize(pageSize)
      }
    }}
    />
  </div>
} ;
export default Shoplist;